import { memo } from "react"
import { SvgComponent } from "@/components/base/Svg"
import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"

interface PageHeaderProps {
    title: string
    onBack?: () => void
}

const HeaderWrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    height: 44rem;
    margin-bottom: 12rem;
`

const BackIcon = styled.div`
    user-select: none;
    width: 28rem;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 0rem;
    top: 50%;
    transform: translateY(-50%);
`

const Title = styled.h3`
    margin: 0;
    font-weight: 700;
    font-size: 18rem;
    vertical-align: middle;
    color: #131416;
`

const IconArrowLeftSvg = styled(SvgComponent("pages/BetRecordPage/icon_arrow_left.svg"))``

export const BetRecordHeader = memo(({ title, onBack }: PageHeaderProps) => {
    const navigate = useNavigate()
    const handleBack = () => {
        if (onBack) return onBack()
        navigate(-1)
    }

    return (
        <HeaderWrapper>
            <BackIcon onClick={handleBack}>
                <IconArrowLeftSvg />
            </BackIcon>
            <Title>{title}</Title>
        </HeaderWrapper>
    )
})
